<template>
  <el-dialog
    v-model="centerDialogVisible"
    title="添加经销商信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="dealerForm"
      :rules="rules"
      label-width="120px"
      :status-icon="true"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dealerForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="dealerForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="所属区域" prop="ownArea">
       
        <el-cascader
         v-model="dealerArea"
          placeholder="查询或选择区域"
          :options="areas"
          filterable
          :props="areasProps"
        />
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
        <el-input v-model="dealerForm.address"></el-input>
      </el-form-item>

      <el-form-item label="合作状态" prop="username">
        
        <el-switch v-model="dealerForm.state"  active-color="#13ce66" inactive-color="#ff4949" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dealerForm.remark"></el-input ></el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { postRequest } from "../../utils/api";
import region from '../../utils/region';

function dealerAdd(state, validateForm, emit) {
  const submitForm = () => {
    validateForm.value.validate((valid) => {
      if (valid) {
        if(state.dealerArea){
            state.dealerForm.ownArea = state.dealerArea.toString()
        }
        postRequest("/sell/dealer/", state.dealerForm).then((res) => {
          if (res && res.code == 200) {
            validateForm.value.resetFields();
            emit("onCloseDialog", false, res.data);
          } else {
            ElMessage({
              showClose: true,
              message: res.message,
              type: "error",
            });
          }
        });
      }
    });
  };
  return { submitForm };
}

export default {
  components: {},
  props: {
    centerDialogVisible: Boolean,
  },

  setup(props, { emit }) {
    const validateForm = ref();
    const state = reactive({
      centerDialogVisible: props.centerDialogVisible,
      dealerArea:["河北省","邯郸市","成安县"],
      dealerForm: {
        name: "",
        phone: "",
        username: "",
        address: "",
        remark: "",
        state: true,
        ownArea:''
      },
      areasProps:{children:'children',label:'name',value:"name"},
      areas:region
    });

    const rules = {
      name: [{ required: true, message: "请输入经销商名", trigger: "blur" }],
      phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
    
    };

    const closeDialog = (visible, data) => {
      validateForm.value.resetFields();
      emit("onCloseDialog", visible, data);
      state.dealerForm.password = "";
    };

    return {
      ...toRefs(state),
      closeDialog,
      rules,
      ...dealerAdd(state, validateForm, emit), //解构goodsAdd返回的结果  返回submitAdd对象函数 需要把富文本编辑器也传过去 这里省略了
      validateForm,
    };
  },
};
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>